<template>
	<view>
		<u-cell-group>
			<u-cell size="large" title="头像" isLink>
				<template #value @click="changeHead">
						<!-- <u-avatar :src="userInfo.headImg"></u-avatar> -->
					    <u-avatar v-if="userInfo.headImg == ''"
					            :text="userInfo.name.substring(0,1)"
					            fontSize="18"
					            randomBgColor
					    ></u-avatar>
				</template>
			</u-cell>
			<u-cell size="large" title="姓名" :isLink="true" :value="userInfo.name" arrow-direction="right"
				@click="modifyNickname"></u-cell>
			<u-cell size="large" title="学号" :isLink="false" :value="userInfo.xhNumber"
				@click="changeXhNumber"></u-cell>
			<u-cell size="large" title="性别" :isLink="true" :value="userInfo.sex" arrow-direction="right"
				@click="selectSex"></u-cell>
			<u-cell size="large" title="手机号" :isLink="false" :value="userInfo.tellPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')"
				@click="changePhone"></u-cell>
			<u-cell size="large" title="联系地址" :isLink="true" :value="userInfo.address" arrow-direction="right"
				@click="contactAddress"></u-cell>
		</u-cell-group>
	</view>
	<!-- 消息提示 -->
	<u-toast ref="uToastRef"></u-toast>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		nextTick,
		watch,
		watchEffect,
		onMounted
	} from 'vue';
	const uToastRef = ref(null); // 定义一个消息的ref同名
	const userInfo = reactive({
		headImg: "",
		xhNumber: "191411030000",
		name: "张三",
		sex: "男",
		tellPhone: "15565423215",
		address: "静冈花园街道三号"
	})
	// 功能函数：修改头像
	const changeHead = () => {
		console.log(userInfo.headImg)
	}
	// 功能函数：修改姓名
	const modifyNickname = () => {
		uni.navigateTo({
			url: '/pages/meUser/modifyNickname',
		})
	}
	// 功能函数：修改学号
	const changeXhNumber= () => {
		console.log(userInfo.xhNumber)
	}
	
	// 功能函数：修改性别
	const selectSex = () => {
		
		const arr = ['男', '女']
		
		uni.showActionSheet({
			itemList: arr,
			success: (res) => {
				userInfo.sex = arr[res.tapIndex]
				// let model = {
				// 	"sex": arr[res.tapIndex],
				// 	"id": this.userInfo.id
				// }
				console.log(uToastRef.value)
				uToastRef.value.show({
					type: 'success',
					message: "修改成功",
				})
				// 发请求
				// uni.request({
				// 	url: baseUrl + "/member/user/updateBaseInfo",
				// 	method: 'PUT',
				// 	data: model,
				// 	header: {
				// 		'content-type': 'application/json',
				// 	},
				// 	success: (ress) => {
				// 		this.$refs.uToastRef.show({
				// 			type: 'success',
				// 			message: "修改成功",
				// 		})
				// 	}
				// });
			},
			fail: function(res) {
				console.log(res.errMsg);
			}
		});
	}
	// 功能函数：修改手机号
	const changePhone = () => {
		console.log(userInfo.tellPhone)
	}
	// 功能函数：修改地址
	const contactAddress = () => {
		uni.navigateTo({
			url: '/pages/meUser/contactAddress',
		})
	}
</script>

<style lang="scss" scoped>
	.u-slot-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.u-slot-title {
		color: #3e4248;
		font-size: 28rpx;
		font-weight: 0;
		min-width: 200rpx;
	}

	.u-text {
		color: #666;
	}

	.sl-txt {
		color: #999;
	}

	.u-cell__body--large {
		padding: 30rpx 40rpx !important;
	}
</style>